<template>
	<view>
		<view class="header">
			<view class="tab u-f-jsb">
				<view class="tab-l u-f-ac">
					<view
						v-for="(item, index) in tabs"
						:class="{ active: index === tabIndex }"
						@tap="tabIndex = index"
					>
						{{ item }}
					</view>
				</view>
				<view @tap="dateOpenClose">
					<view class="way-1" v-show="dateType === 0">
						<text class="mon">{{ month }}</text>
						<text class="date">月{{ year }}年</text>
					</view>
					<view class="way-2" v-show="dateType === 1">
						<view>{{ startTime }}</view>
						<view>{{ endTime }}</view>
					</view>
				</view>
			</view>
			<view class="sum u-f-ac">
				<view>
					<view>总充值</view>
					<view class="num">¥{{ totalChargeMoney || 0 }}</view>
				</view>
				<view>
					<view>总消费</view>
					<view class="num">¥{{ totalFillMoney || 0 }}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item u-f-jsb" v-for="item in records" :key="item.distributeId">
				<view class="item-l">
					<view v-if="item.distributeType===1">账户充值</view>
					<view v-if="item.distributeType===0">从余额转出</view>
					<view v-if="item.distributeType===2">消费</view>
					<view class="time">{{item.distributeTime}}</view>
				</view>
				<view v-if="item.distributeType===1" style="color: #0DC887;">+ {{item.distributeMoney}}</view>
				<view v-else style="color: #DF5656;">- {{item.distributeMoney}}</view>
			</view>
		</view>

		<!-- 缺省 -->
		<view class="no_lists" v-if="records.length === 0 && !isloading">
			<image src="../static/wxImage/bg-noRecord.png" mode="aspectFill"></image>
			<text class="tip">暂无数据</text>
		</view>

		<!-- 日期筛选遮罩层 -->
		<date-select
			:show="showPopup"
			:start="startTime"
			:end="endTime"
			:type="dateType"
			:top="88"
			@submit="onSubmit"
			@cancle="onCancle"
		></date-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabIndex: 0,
			tabs: ['全部', '充值', '消费'],

			records: [],
			totalChargeMoney:'',
			totalFillMoney:'',
			//日期筛选
			showPopup: false, //显示日期筛选
			dateType: 0, //方式，0-按月筛选，1-按日筛选
			year: 2020, //按月筛选-年份
			month: 1, //按月筛选-月份
			startTime: '', //开始日期-提交
			endTime: '' ,//结束日期-提交,
			isloading:false,
		};
	},
	watch: {
		tabIndex() {
			this.page = 1;
			this.records = [];
			this.getCardRecord();
		}
	},
	onLoad(options) {
		this.page = 1;
		this.cardId = options.id;
		this.getDate();
		this.getCardRecord();
	},
	onReachBottom() {
		this.page++;
		this.getCardRecord()
	},
	methods: {
		getCardRecord() {
			this.isloading = true;
			this.$http({
				url: this.$api.recordUrl + 'getcarddistributelist',
				data: {
					cardId: this.cardId,
					page: this.page,
					rows: 20,
					startTime: this.startTime+' 00:00:00',
					endTime: this.endTime +' 23:59:59',
					type: this.tabIndex
				}
			}).then(res => {
				this.totalChargeMoney = res.totalChargeMoney;
				this.totalFillMoney = res.totalFillMoney;
				this.records = [...this.records, ...res.lstDistributes];
				console.log(res);
			}).finally(()=>{
				this.isloading = false;
			})
		},
		//获取日期
		getDate() {
			this.endTime = this.$getToday();
			let arr = this.endTime.split('-');
			this.startTime = arr[0] + '-' + arr[1] + '-01';
			this.year = arr[0];
			this.month = arr[1];
		},
		//打开/关闭日期筛选弹窗
		dateOpenClose() {
			this.isTermSelect = false;
			this.showPopup = !this.showPopup;
		},
		//确认日期筛选
		onSubmit(start, end, type) {
			this.showPopup = false;
			this.dateType = type;
			this.startTime = start;
			this.endTime = end;
			if (type === 0) {
				let arr = this.startTime.split('-');
				this.year = arr[0];
				this.month = parseInt(arr[1]);
			}
			this.hasSelect();
		},
		//取消日期筛选
		onCancle(bool) {
			this.showPopup = bool;
		},
		//筛选过后重新获取列表
		hasSelect() {
			this.page = 1;
			this.getCardRecord();
			this.records = [];
		}
	}
};
</script>

<style lang="scss">
.header {
	background-color: #ffffff;
	padding-bottom: 20rpx;
}
.tab {
	height: 88rpx;
	padding-right: 30rpx;

	.tab-l {
		view {
			padding: 10rpx 30rpx;
			transition: all linear 0.1s;

			&.active {
				font-weight: 800;
				transform: scale(1.1);
			}
		}
	}
}
.sum {
	margin: 20rpx 30rpx;
	border-radius: 16rpx;
	background-color: #0dc887;
	height: 160rpx;
	padding: 0 30rpx;

	view {
		color: #eeeeee;
		font-size: 24rpx;

		&:first-child {
			margin-right: 80rpx;
		}

		.num {
			font-size: 36rpx;
			color: #ffffff;
			margin-top: 10rpx;
			font-weight: 800;
		}
	}
}
.list {
	margin: 20rpx 0;
	background-color: #ffffff;
	

	.item {
		padding: 30rpx;
		&:not(:last-child) {
			border-bottom: 2rpx solid #cccccc;
		}

		.item-l>view:first-child {
			font-size: 32rpx;
			margin-bottom: 20rpx;
			font-weight: 800;
		}
		.time {
			font-size: 24rpx;
			color: #999999;
		}
	}
}
.no_lists {
	margin-top: 10vh;
}
</style>
